<template>
  <div class="reportDetailContainer">
    <div class="wrapper" id="wrapper">
      <!-- 头部 -->
      <van-nav-bar title="噪音监测" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <div class="wetherCont">
        <!-- 值 -->
        <div class="weather f fb">
          <div class="middleCont_left fl">
            <p class="top">
              {{ panel.realTimeValue != null ? panel.realTimeValue : "-" }}
            </p>
            <p class="bot f fc">场界实测值</p>
          </div>
          <div class="middleCont_middle"></div>
          <div class="middleCont_left fl">
            <p class="top">
              {{ panel.featuresValue != null ? panel.featuresValue : "-" }}
            </p>
            <p class="bot f fc">功能区影响值</p>
          </div>
        </div>
      </div>
      <div class="reportCont">
        <!-- 环境评价 -->
        <div class="hjpj">
          <div class="top f fb">
            <div class="left fl">
              <ul class="title_ul f">
                <li
                  class="title_li"
                  v-for="(item, index) in titleList"
                  :key="index"
                  :class="{ title_li_act: titleIndex == index }"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="right f fc" @click="toHistoryData">历史数据</div>
          </div>
          <div class="hjpj_cont f fb">
            <div
              class="left f fc"
              v-bind:style="{ color: activeColor, borderColor: activeColor }"
            >
              {{ evaluate }}
            </div>
            <div class="right fl">
              <progressLite
                :value="progress.value"
                :data="progress"
                id="pro-1"
                :height="80"
              />
            </div>
          </div>
        </div>
        <!-- 施工场界实时监测值 -->
        <div class="cont">
          <div class="contTitle f fb">
            <div class="f">
              <van-icon name="arrow" class="right" />施工场界实时监测值
            </div>

            <div class="btitle">{{ chart1.subtitle }}</div>
          </div>
          <div class="echartDiv" id="data1"></div>
        </div>
        <!-- 功能区影响值 -->
        <div class="cont">
          <div class="contTitle f fb">
            <div class="f">
              <van-icon name="arrow" class="right" />功能区影响值
            </div>
            <div class="btitle">{{ chart2.subtitle }}</div>
          </div>
          <div class="echartDiv" id="data2"></div>
        </div>
        <!-- 前20分钟等级效声级 -->
        <div class="cont">
          <div class="contTitle f fb">
            <div class="f">
              <van-icon name="arrow" class="right" />前20分钟等级效声级
            </div>
            <div class="btitle">{{ chart3.subtitle }}</div>
          </div>
          <div class="echartDiv" id="data3"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var projectId = localStorage.getItem("projectid");
import progressLite from "../progressLite.vue";
import {
  measuredNoisePost,
  selectDbByReal,
  noiseRule,
  noiseAllRule,
  noiseHour,
  noiseMinute,
} from "@/api/api";
import echarts from "echarts";
const text = ["db", "PM10"];
import moment from "moment";
export default {
  components: {
    progressLite,
  },
  data() {
    return {
      //日历

      titleList: ["环境评价"],
      titleIndex: 0,
      //显示实测值面板数据
      panel: {
        realTimeValue: 0, //施工场界实测值（来源data1）
        featuresValue: 0, // 功能区检测值（来源data2）
      },
      evaluate: "", //超频
      activeColor: "", //动态颜色
      progress: {}, // 环境里面组件的对象值
      alltype: 0, // 这里获取全部规则类型的day  画chart3 图的折现
      chart1: {
        options: {},
        subtitle: "",
        now: "",
        time: "",
      },
      chart2: {
        options: {},
        subtitle: "",
        now: "",
        time: "",
      },
      chart3: {
        options: {},
        subtitle: "",
        now: "",
        time: "",
      },
      type: 3,
      //噪音规则
      ruleTypeData: {}, //类型数据的全部数据 选择data3 预警线
      ruleType: {}, // 获取类型数据
      pm25StandardLimit: 0,
      pm10StandardLimit: 0,
      dateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
    };
  },
  mounted() {
    // this.getCurrentTime()
    this.init();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    //去历史数据
    toHistoryData() {
      this.$router.push({ path: "/noiseHistory" }); //返回上一层
    },
    // new Date() 获取当前标准时间，转为：YYYY-MM-DD h:m:s (年月日:时分秒) 格式
    init() {
      //噪声规则
      this.Request(noiseRule(projectId)).then((res) => {
        if (res.status == "200") {
          var data = res.body;
          this.ruleType = data; // 获取类型数据

          /**
           * 判断在 6：00 到 22 ：00是白天  检查一个时刻是否在其他两个时刻之间，可以选择查看单位刻度
           * 产品逻辑是：在等于22：00还是白天  22：01 是晚上  在等于06：00还是晚上  06：01 是白天
           **/
          if (
            moment(moment().format("YYYY-MM-DD HH:mm")).isBetween(
              moment().format("YYYY-MM-DD 06:00"),
              moment().format("YYYY-MM-DD 22:01"),
              "minute"
            )
          ) {
            this.pm25StandardLimit = (data && data.dayStandardLimit) || 0; //白天标准限制（6-22）
          } else {
            this.pm25StandardLimit = (data && data.nightStandardLimit) || 0; //晚天标准限制（6-22）
          }
          this.$nextTick(() => {
            this.noiseAllRule1();
          });
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });

      //data施工厂界实时监测
      var params = {
        projectId: projectId,
        type: this.type,
        dateTime: this.dateTime,
      };
      this.Request(selectDbByReal(params)).then((res) => {
        if (res.status == "200") {
          const mainChart = res.body;
          this.handleLineData(mainChart);
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
      //data2功能区影响值

      this.Request(noiseMinute(params)).then((res) => {
        if (res.status == "200") {
          const mainChart = res.body;
          // this.handleLineData(mainChart);
          this.handleHourData(mainChart);
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
      //data3
      this.Request(noiseHour(params)).then((res) => {
        if (res.status == "200") {
          const mainChart = res.body.mainChart;
          this.handleDayData(mainChart);
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    noiseAllRule1() {
      // 获取噪声全部规则

      this.Request(noiseAllRule(projectId)).then((res) => {
        if (res.status == "200") {
          var data = res.body;
          data.map((e) => {
            if (e.id === this.ruleType.dbTypeId) {
              this.ruleTypeData = e;
              if (
                moment(moment().format("YYYY-MM-DD HH:mm")).isBetween(
                  moment().format("YYYY-MM-DD 06:00"),
                  moment().format("YYYY-MM-DD 22:01"),
                  "minute"
                )
              ) {
                this.alltype = e.day; //白天标准限制（6-22）
              } else {
                this.alltype = e.night; //白天标准限制（6-22）
              }
            }
          });
          this.$nextTick(() => {
            this.measuredNoisePost1();
          });
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    measuredNoisePost1() {
      //面板实测值
      this.Request(measuredNoisePost(projectId)).then((res) => {
        if (res.status == "200") {
          this.panel = res.body;
          var defaultNormal = this.alltype + 0.1 * this.alltype; //正常 噪音的先按照:限值以下为正常, 大于限值0.1超标，大于限值0.2以上严重;
          var defaultExcess = this.alltype + 0.2 * this.alltype; //超标 噪音的先按照:限值以下为正常, 大于限值0.1超标，大于限值0.2以上严重;
          console.log("alltype", this.alltype);
          console.log("defaultNormal", defaultNormal);
          console.log("defaultNormal", defaultExcess);
          const normal =
            defaultNormal > defaultExcess ? defaultExcess : defaultNormal;
          const excess =
            defaultNormal > defaultExcess ? defaultNormal : defaultExcess;
          console.log(111111111, this.panel.featuresValue);
          console.log("excess", excess);
          console.log("normal", normal);
          this.progress = {
            normal,
            excess,
            value:
              this.panel.featuresValue > excess
                ? 100
                : this.panel.featuresValue > normal
                ? 66.66
                : 33.33,
          };
          if (this.panel.featuresValue <= normal) {
            //正常
            this.evaluate = "合格";
            this.activeColor = "#1AAB03";
          } else if (this.panel.featuresValue > excess) {
            //呀严重
            this.evaluate = "严重";
            this.activeColor = "#E14040";
          } else {
            // 超标
            this.evaluate = "超标";
            this.activeColor = "#DFAF3C";
          }
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    //施工场结扎
    handleLineData(data) {
      const xList = Array.apply(null, { length: 60 }).map((a, i) =>
        i >= 10 ? `${i}` : `0${i}`
      );
      let maxIndex = 0;
      const sysTime = moment().format("YYYY-MM-DD HH:00:00");
      // 在当前小时之前
      maxIndex = parseInt(moment(this.dateTime).format("mm"), 10);
      let monVal = 0;
      for (let i = 0; i < data.length; i++) {
        if (data[i].monVal) {
          // 取第一个有效数据为填补的数据
          monVal = data[i].monVal;
          break;
        }
      }
      const effectData = Array.apply(null, { length: maxIndex + 1 })
        .map((a, i) => (i >= 10 ? `${i}` : `0${i}`))
        .map((item) => {
          const rule = new RegExp(item);
          for (let i = 0; i < data.length; i++) {
            const per = data[i];
            if (rule.test(per.xtime.slice(14, 16))) {
              // 重置有效数据，确保距离待修补位置最近
              monVal = per.monVal;
              break;
            }
          }
          return monVal;
        });

      const self = this;
      const now = new Date().getHours();
      let warnLine;
      warnLine = this.pm25StandardLimit;
      let count = 0;
      data.map((item) => {
        if (item.isWarn) {
          count += 1;
        }
      });
      this.chart1.subtitle = `预警${count}次`;
      this.chart1.now = moment();
      let max = 100;
      //判断有没有数据
      if (data.length) {
        // TODO:
        max = effectData.reduce(function (a, b) {
          return b > a ? b : a;
        });
      }
      const interval = Math.max(Math.round(max / 5), 15);
      max =
        max > this.pm25StandardLimit
          ? (Math.ceil(max / interval) + 1) * interval
          : (Math.ceil(this.pm25StandardLimit / interval) + 1) * interval;
      //引入
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("data1"));
      // 绘制图表
      this.chart1.options = {
        grid: {
          x: 35, //据左边距离
          y: 30, //据上边距离
          x2: 35, //据右边距离
          y2: 20, //据下边距离
        },
        color: "#699FFF",
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          name: "(分)",
          axisTick: {
            alignWithLabel: true,
          },
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#CFD3E3",
            },
          },
          axisLabel: {
            fontSize: 10,
            color: "#989A9C",
          },
          axisPointer: {
            label: {
              formatter(params) {
                return `db ${params.value}`;
              },
            },
          },
          data: xList,
        },
        yAxis: {
          type: "value",
          name: "dB",
          max: max,
          interval,
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLabel: {
            fontSize: 10,
            color: "#989A9C",
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#CFD3E3",
            },
          },
        },
        series: {
          name: `${text[self.type - 1]}（ug/m³）`,
          type: "line",
          smooth: true,
          data: effectData,
          markPoint: {
            data: [
              {
                name: "周最低",
                value: effectData[effectData.length - 1],
                coord: [
                  effectData.length - 1,
                  effectData[effectData.length - 1],
                ],
                symbolSize: 40,
                label: {
                  fontSize: 12,
                  fontWeight: "bold",
                },
              },
            ],
          },
          markLine: {
            animation: false,
            symbol: "none",
            data: [{ name: "警戒线", yAxis: warnLine }],

            lineStyle: {
              color: "#FFB200",
            },
          },
        },
      };
      myChart.setOption(this.chart1.options);
    },
    //data2
    handleHourData(data) {
      const xList = Array.apply(null, { length: 60 }).map((a, i) =>
        i >= 10 ? `${i}` : `0${i}`
      );
      let maxIndex = 0;
      const sysTime = moment().format("YYYY-MM-DD HH:00:00");
      // 在当前小时之前
      maxIndex = parseInt(moment(this.dateTime).format("mm"), 10);
      let monVal = 0;
      for (let i = 0; i < data.length; i++) {
        if (data[i].monVal) {
          // 取第一个有效数据为填补的数据
          monVal = data[i].monVal;
          break;
        }
      }
      const effectData = Array.apply(null, { length: maxIndex + 1 })
        .map((a, i) => (i >= 10 ? `${i}` : `0${i}`))
        .map((item) => {
          const rule = new RegExp(item);
          for (let i = 0; i < data.length; i++) {
            const per = data[i];
            if (rule.test(per.xtime.slice(14, 16))) {
              // 重置有效数据，确保距离待修补位置最近
              monVal = per.monVal;
              break;
            }
          }
          return monVal;
        });

      const self = this;
      const now = new Date().getHours();
      let warnLine;
      warnLine = this.pm25StandardLimit;
      let count = 0;
      data.map((item) => {
        if (item.isWarn) {
          count += 1;
        }
      });
      this.chart2.subtitle = `预警${count}次`;
      this.chart2.now = moment();
      let max = 100;
      //判断有没有数据
      if (data.length) {
        // TODO:
        max = effectData.reduce(function (a, b) {
          return b > a ? b : a;
        });
      }
      const interval = Math.max(Math.round(max / 5), 15);
      max =
        max > this.pm25StandardLimit
          ? (Math.ceil(max / interval) + 1) * interval
          : (Math.ceil(this.pm25StandardLimit / interval) + 1) * interval;
      //引入
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("data2"));
      // 绘制图表
      this.chart2.options = {
        grid: {
          x: 35, //据左边距离
          y: 30, //据上边距离
          x2: 35, //据右边距离
          y2: 20, //据下边距离
        },
        color: "#699FFF",
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          name: "(分)",
          axisTick: {
            alignWithLabel: true,
          },
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLabel: {
            fontSize: 10,
            color: "#989A9C",
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#CFD3E3",
            },
          },
          axisPointer: {
            label: {
              formatter(params) {
                return `db ${params.value}`;
              },
            },
          },
          data: xList,
        },
        yAxis: {
          type: "value",
          name: "dB",
          max: max,
          interval,
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLabel: {
            fontSize: 10,
            color: "#989A9C",
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#CFD3E3",
            },
          },
        },
        series: {
          name: `${text[self.type - 1]}（ug/m³）`,
          type: "line",
          smooth: true,
          data: effectData,
          markPoint: {
            data: [
              {
                name: "周最低",
                value: effectData[effectData.length - 1],
                coord: [
                  effectData.length - 1,
                  effectData[effectData.length - 1],
                ],
                symbolSize: 40,
                label: {
                  fontSize: 12,
                  fontWeight: "bold",
                },
              },
            ],
          },
          markLine: {
            animation: false,
            symbol: "none",
            data: [{ name: "警戒线", yAxis: warnLine }],

            lineStyle: {
              color: "#FFB200",
            },
          },
        },
      };
      myChart.setOption(this.chart2.options);
    },
    //data3 前20分zhong
    handleDayData(mainChart) {
      // 生成横轴数 // 数据源
      var that = this;
      var XAxis = [];
      var normalData = [];
      var warningData = [];
      let startTime = null;
      if (mainChart && mainChart.length) {
        startTime = mainChart[0].xtime.slice(11, 16);
      }
      var datasss = [
        "00:00",
        "00:20",
        "00:40",
        "01:00",
        "01:20",
        "01:40",
        "02:00",
        "02:20",
        "02:40",
        "03:00",
        "03:20",
        "03:40",
        "04:00",
        "04:20",
        "04:40",
        "05:00",
        "05:20",
        "05:40",
        "06:00",
        "06:20",
        "06:40",
        "07:00",
        "07:20",
        "07:40",
        "08:00",
        "08:20",
        "08:40",
        "09:00",
        "09:20",
        "09:40",
        "10:00",
        "10:20",
        "10:40",
        "11:00",
        "11:20",
        "11:40",
        "12:00",
        "12:20",
        "12:40",
        "13:00",
        "13:20",
        "13:40",
        "14:00",
        "14:20",
        "14:40",
        "15:00",
        "15:20",
        "15:40",
        "16:00",
        "16:20",
        "16:40",
        "17:00",
        "17:20",
        "17:40",
        "18:00",
        "18:20",
        "18:40",
        "19:00",
        "19:20",
        "19:40",
        "20:00",
        "20:20",
        "20:40",
        "21:00",
        "21:20",
        "21:40",
        "22:00",
        "22:20",
        "22:40",
        "23:00",
        "23:20",
        "23:40",
      ];
      let maxIndex = 0;
      const sysTime = moment().format("YYYY-MM-DD HH:00:00");
      const curHour = moment(this.dateTime).format("HH");
      const curMinute = moment(this.dateTime).format("mm");
      maxIndex = parseInt(curHour) * 3 + Math.floor(curMinute / 10) / 2;
      // // 在当前小时之前
      // if (this.chart3.time.isBefore(sysTime)) {
      //   maxIndex = datasss.length - 1;
      // } else if (this.chart3.time.isAfter(sysTime)) {
      //   // 明天及以后
      //   if (this.chart3.time.format('YYYY-MM-DD') !== sysTime.slice(0, 10)) {
      //     maxIndex = 0;
      //   } else {
      //     const curHour = moment().format('HH');
      //     const curMinute = moment().format('mm');
      //     maxIndex = parseInt(curHour) * 3 + Math.floor(curMinute / 10) / 2;
      //   }
      // } else {
      //   const curHour = moment(this.chart3.time).format('HH');
      //   const curMinute = moment(this.chart3.time).format('mm');
      //   maxIndex = parseInt(curHour) * 3 + Math.floor(curMinute / 10) / 2;
      // }

      let monVal = 0;
      let isWarn = false;
      for (let i = 0; i < mainChart.length; i++) {
        if (mainChart[i].monVal) {
          // 取第一个有效数据为填补的数据
          monVal = mainChart[i].monVal;
          isWarn = mainChart[i].isWarn;
          break;
        }
      }
      const renderArr = Array.apply(null, { length: maxIndex + 1 }).map(
        (item, i) => {
          const rule = new RegExp(datasss[i]);
          for (let j = 0; j < mainChart.length; j++) {
            const per = mainChart[j];
            if (rule.test(per.xtime.slice(11, 16))) {
              monVal = per.monVal;
              isWarn = per.isWarn;
              break;
            }
          }
          return {
            monVal,
            isWarn,
          };
        }
      );

      normalData = renderArr.map((item) => ({
        value: item.monVal,
        itemStyle: {
          color: item.isWarn ? "#FFB200" : "#04BD70",
        },
      }));
      var XAxis = XAxis.concat(datasss.slice(XAxis.length));

      let count = 0;
      mainChart.map((item) => {
        if (item.isWarn) {
          count += 1;
        }
      });
      this.chart3.subtitle = `预警${count}次`;
      //预警线
      var effectDatas = [];

      mainChart.map((item, index) => {
        effectDatas[index] = item.monVal;
      });
      // 要比较的四个预警值 一起找上最大值
      effectDatas.push(
        this.ruleType.dayStandardLimit || 0,
        this.ruleType.nightStandardLimit || 0,
        this.ruleTypeData.day || 0,
        this.ruleTypeData.night || 0
      );
      var max = effectDatas.reduce(function (a, b) {
        return b > a ? b : a;
      });
      //最大值上十
      const interval = Math.max(Math.round(max / 5), 15);
      max = (Math.ceil(max / interval) + 1) * interval;
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("data3"));
      // 绘制图表
      this.chart3.options = {
        //柱状体颜色
        color: "#699FFF",
        //头部提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          left: "center",
          bottom: 0,
          data: "正常",
          textStyle: {
            fontSize: 16,
          },
        },

        // 图形大小
        grid: {
          x: 35, //据左边距离
          y: 30, //据上边距离
          x2: 10, //据右边距离
          y2: 20, //据下边距离
        },
        // x 轴
        xAxis: [
          {
            type: "category",
            data: XAxis,
            axisPointer: {
              type: "shadow",
            },
            nameTextStyle: {
              fontSize: 12,
              color: "#000",
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#CFD3E3",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "dB",
            max: max,
            interval,
            nameTextStyle: {
              fontSize: 12,
              color: "#000",
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#CFD3E3",
              },
            },
          },
        ],
        series: [
          {
            name: "正常",
            type: "bar",
            data: normalData,
            markLine: {
              animation: false,
              symbol: "none",
              lineStyle: { color: "#00BD70" },
              // 凸线
              data: [
                [
                  {
                    name: "",
                    coord: ["00:00", that.ruleType.nightStandardLimit],
                  },
                  { coord: ["06:00", that.ruleType.nightStandardLimit] },
                ],
                [
                  { coord: ["06:00", that.ruleType.nightStandardLimit] },
                  { coord: ["06:00", that.ruleType.dayStandardLimit] },
                ],
                [
                  { coord: ["06:00", that.ruleType.dayStandardLimit] },
                  { coord: ["22:00", that.ruleType.dayStandardLimit] },
                ],
                [
                  { coord: ["22:00", that.ruleType.nightStandardLimit] },
                  { coord: ["22:00", that.ruleType.dayStandardLimit] },
                ],
                [
                  { coord: ["22:00", that.ruleType.nightStandardLimit] },
                  { coord: ["23:40", that.ruleType.nightStandardLimit] },
                ],
                [
                  {
                    name: "",
                    coord: ["00:00", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                  {
                    coord: ["06:00", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                ],
                [
                  {
                    coord: ["06:00", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                  {
                    coord: ["06:00", that.ruleTypeData.day],
                    lineStyle: { color: "#FFBC20" },
                  },
                ],
                [
                  {
                    coord: ["06:00", that.ruleTypeData.day],
                    lineStyle: { color: "#FFBC20" },
                  },
                  {
                    coord: ["22:00", that.ruleTypeData.day],
                    lineStyle: { color: "#FFBC20" },
                  },
                ],
                [
                  {
                    coord: ["22:00", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                  {
                    coord: ["22:00", that.ruleTypeData.day],
                    lineStyle: { color: "#FFBC20" },
                  },
                ],
                [
                  {
                    coord: ["22:00", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                  {
                    coord: ["23:40", that.ruleTypeData.night],
                    lineStyle: { color: "#FFBC20" },
                  },
                ],
              ],
            },
          },
        ],
      };
      myChart.setOption(this.chart3.options);
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../assets/common';

.btitle {
  color: #ffb200;
}

.hjpj_cont {
  padding-left: 30px;
  box-sizing: border-box;

  .left {
    width: 95px;
    height: 95px;
    border-radius: 100%;
    border: 6px solid #f00;
    font-size: 32px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .right {
    height: 100%;
    text-align: center;
  }
}

.wetherCont {
  width: 100%;
  height: 300px;
  background: url('../../imgs/reportBg.jpg') no-repeat;
  background-size: 100% 100%;
  padding: 30px 0;
  box-sizing: border-box;

  .weather {
    width: 93%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    background: rgba(249, 255, 252, 0.2);
    border-radius: 8px;
    height: 180px;

    .middleCont_left {
      color: #fff;
      text-align: center;

      .top {
        font-weight: bold;
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #F2FE31;
        margin-bottom: 38px;
      }

      .bot {
        font-size: 30px;
      }
    }

    .middleCont_middle {
      width: 1px;
      height: 90px;
      background: #fff;
      opacity: 0.47;
    }
  }
}
</style>